<template>
  <div class="categories">
      <h1>CATEGORIES</h1>
      <el-breadcrumb separator="/" class="bread">
          <el-breadcrumb-item><el-link :underline="false" @click="router.push('/index')">首页</el-link></el-breadcrumb-item>
          <el-breadcrumb-item>categories</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="cat-info" v-if="obj.isShow">
          <div v-for="item in obj.catList" class="cat-item">
              <img :src="item.descn" alt="{{item.catid}}"/>
              <el-link :underline="false" class="link" @click="router.push('/categories/'+item.catid)">{{item.name}}</el-link>
          </div>
      </div>
  </div>
</template>

<script setup lang="ts">
  import {get} from '@/assets/ts/ruquestMethod'
  import router from "@/router";
  import {reactive} from "vue";
  let obj = reactive({
      isShow : false,
      catList : ''
  })
  get('/categorys',
      (data:any) => {
          obj.catList = data.data
          obj.isShow = true
          console.log(obj.catList)
      }
  )

</script>

<style scoped>
  .categories{
      text-align: center;
  }
  .categories h1{
      font-size: 4vw;
  }
  .bread{
      margin-left: 15%;
      margin-bottom: 20px;
  }
  .cat-info{
      width: 70%;
      margin-left: 15%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
  }
  .cat-item{
      border-radius: 5%;
      text-align: center;
      width: 23%;
      margin-right: 2%;
      margin-bottom: 20px;
  }
  .cat-item:hover{
      /* border: solid 1px gray; */
      box-shadow: var(--el-box-shadow);
      /*border-style: solid;*/
      /*border-color: #CDD0D6;*/
      transition: 0.5s;
  }
  .cat-item img{
      margin-top: 5%;
      /*margin-bottom: 5%;*/
      margin-left: 5%;
      width: 80%;
      height: 80%;
      border-radius: 10%;
      display: flex;
      flex-direction: column;
  }
  .link{
      margin-left: 5%;
      float: left;
      font-size: 20px;
      font-weight: bold;

  }
</style>